<!--HOTSCAN检查-->
<template>
  <div class="app-container">
    <el-form ref="form" :model="form">
      <el-row>
        <el-col :span="7">
          <el-form-item label="检索编号(TRN)" label-width="95px" prop="checkId">
            <el-input placeholder="请输入检索编号" v-model="form.checkId" />
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="系统编号" label-width="95px" prop="bepsId">
            <el-input placeholder="请输入系统编号" v-model="form.bepsId" />
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="业务编号" label-width="95px" prop="businessId">
            <el-input placeholder="请输入业务编号" v-model="form.businessId" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="7">
          <el-form-item label="业务种类" label-width="95px" prop="businessKind">
            <el-select v-model="form.businessKind">
              <el-option label="T-kindSET" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="交易日期" label-width="95px" prop="workDate">
            <el-date-picker
              v-model="form.workDate"
              type="daterange"
              style="width: 100%"
              range-separator="-"
              value-format="yyyyMMdd"
              start-placeholder="请输入交易开始日期"
              end-placeholder="请输入交易结束日期"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="HOTSCAN检查结果" label-width="120px" prop="hotScanResult">
            <el-select collapse-tags multiple v-model="form.hotScanResult" placeholder="请选择HOTSCAN检查结果">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="7">
          <el-form-item label="币种" label-width="95px" prop="amonut">
            <el-input placeholder="" disabled v-model="form.amonut" />
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="金额区间" label-width="95px">
            <el-row>
              <el-col :span="10">
                <el-form-item prop="miniMoney">
                  <el-input placeholder="最小金额" v-model="form.miniMoney" />
                </el-form-item>
              </el-col>
              <el-col :span="1" style="margin-left: 5px">-</el-col>
              <el-col :span="10">
                <el-form-item prop="maxMoney">
                  <el-input placeholder="最大金额" v-model="form.maxMoney" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
        <el-col :span="6" :offset="1">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="search(form)">搜索</el-button>
            <el-button @click="reset">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="3" :offset="22" class="menu-tree">
          <svg-icon icon-class="down_circle" className="menu-tool-btn" />
          <svg-icon icon-class="search-circle" className="menu-tool-btn" />
          <svg-icon icon-class="search-circle_1" className="menu-tool-btn" />
          <svg-icon icon-class="menu-circle" className="menu-tool-btn" />
        </el-col>
      </el-row>

      <div class="table-box" ref="tableBox">
        <el-table
          v-if="tableHeight"
          height="470"
          style="width: 100%; margin-top: 0px"
          :data="tableData"
        >
          <el-table-column prop="checkId" label="检索编号(TRN)" sortable min-width="200"></el-table-column>
          <el-table-column prop="bepsId" label="系统编号" sortable min-width="150"></el-table-column>
          <el-table-column prop="businessId" label="业务编号" sortable min-width="150"></el-table-column>
          <el-table-column prop="businessKind" label="业务种类" sortable min-width="150"></el-table-column>
          <el-table-column prop="hotScanResult" label="HOTSCAN检查结果" min-width="150"></el-table-column>
          <el-table-column prop="workDate" label="交易日期" sortable min-width="150"></el-table-column>
          <el-table-column prop="amonut" label="币种" sortable min-width="80"></el-table-column>
          <el-table-column prop="money" label="金额" sortable min-width="120"></el-table-column>
          <el-table-column prop="payeeName" label="收款人名称" sortable min-width="150"></el-table-column>
          <el-table-column prop="payeeBank" label="收款银行(行名)" sortable min-width="150"></el-table-column>
          <el-table-column prop="payeeAmount" label="收款人账户" sortable min-width="200"></el-table-column>
          <el-table-column prop="payeeAddress" label="收款人地址" sortable min-width="150"></el-table-column>
          <el-table-column prop="payerName" label="付款人名称" sortable min-width="150"></el-table-column>
          <el-table-column prop="payerBank" label="付款银行(行名)" sortable min-width="150"></el-table-column>
          <el-table-column prop="payerAmount" label="付款人账户" sortable min-width="200"></el-table-column>
          <el-table-column prop="payerAddress" label="付款人地址" sortable min-width="150"></el-table-column>
          <el-table-column prop="medBank1" label="中转行1" sortable min-width="150"></el-table-column>
          <el-table-column prop="medBank2" label="中转行2" sortable min-width="150"></el-table-column>

          <!-- <el-table-column
            prop="discountCounterparties"
            label="贴现贸易对手方"
            sortable
            min-width="150"
          ></el-table-column>
          <el-table-column prop="acceptorName" label="承兑人全称" sortable min-width="150"></el-table-column>
          <el-table-column prop="discountApplicant" label="贴现申请人" sortable min-width="150"></el-table-column> -->

          <el-table-column fixed="right" class="table-header-cell" label="操作" min-width="120">
            <template slot-scope="scope">
              <el-button @click.native.prevent="detailRow(scope.$index, tableData)" type="text" size="small">
                明细
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[5, 10, 20, 40]"
            :page-size="10"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="20"
          ></el-pagination>
        </div>
      </div>
    </el-form>

    <hot-scan-detail-qry-dialog ref="hotScanDetailQryDialog"></hot-scan-detail-qry-dialog>
  </div>
</template>

<script>
import hotScanDetailQryDialog from "./components/details";
export default {
  name: "BizHotScanQry",
  components: {
    hotScanDetailQryDialog,
  },
  data() {
    return {
      currentPage4: 1, // 分页
      dialogVisible: false,
      tableHeight: 0,
      options: [
        {
          value: "1",
          label: "AP",
        },
        {
          value: "2",
          label: "MP",
        },
        {
          value: "3",
          label: "AH",
        },
        {
          value: "4",
          label: "MI",
        },
        {
          value: "5",
          label: "MF",
        },
        {
          value: "6",
          label: "无需检查",
        },
        {
          value: "7",
          label: "检查中",
        },
      ],
      form: {
        bepsId: "", // 系统编号
        miniMoney: "", // 最小金额
        maxMoney: "", // 最大金额
        workDate: "", // 交易日期
        businessKind: "1", // 业务种类
        checkId: "", // 检索编号(TRN)
        businessId: "", // 业务编号
        amonut: "CNY", // 币种
        hotScanResult: ["2", "3"], // HOTSCAN检查结果
      },

      tableData: [
        {
          bepsId: "13246231245245354", // 系统编号
          money: "999,99", // 金额
          workDate: "2023-12-11", // 交易日期
          businessKind: "T-kindSET", // 业务种类
          checkId: "345631244635531212351", // 检索编号(TRN)
          businessId: "3153125463463246", // 业务编号
          amonut: "CNY", // 币种
          hotScanResult: "AP", // HOTSCAN检查结果
          payeeName: "张三", // 收款人名称
          payeeBank: "中国工商银行", // 收款银行
          payeeAmount: "1324236546234623421", // 收款人账户
          payeeAddress: "浦东新区", // 收款人地址
          payerName: "李四", // 付款人名称
          payerBank: "中国银行", // 付款银行
          payerAmount: "4512355623462451235", // 付款人账户
          payerAddress: "北京朝阳路", // 付款人地址
          medBank1: "中国农业银行", // 中转行1
          medBank2: "中国建设银行", // 中转行2
          discountCounterparties: "中国农建", // 贴现贸易对手方
          acceptorName: "上海交通银行", // 承兑人全称
          discountApplicant: "王五", // 贴现申请人
          hotScanTime: "2023-12-12", // hotScan检查时间
        },
        {
          bepsId: "13246231245245354", // 系统编号
          money: "999,99", // 金额
          workDate: "2023-12-11", // 交易日期
          businessKind: "T-kindSET", // 业务种类
          checkId: "345631244635531212351", // 检索编号(TRN)
          businessId: "3153125463463246", // 业务编号
          amonut: "CNY", // 币种
          hotScanResult: "AP", // HOTSCAN检查结果
          payeeName: "张三", // 收款人名称
          payeeBank: "中国工商银行", // 收款银行
          payeeAmount: "1324236546234623421", // 收款人账户
          payeeAddress: "浦东新区", // 收款人地址
          payerName: "李四", // 付款人名称
          payerBank: "中国银行", // 付款银行
          payerAmount: "4512355623462451235", // 付款人账户
          payerAddress: "北京朝阳路", // 付款人地址
          medBank1: "中国农业银行", // 中转行1
          medBank2: "中国建设银行", // 中转行2
          discountCounterparties: "中国农建", // 贴现贸易对手方
          acceptorName: "上海交通银行", // 承兑人全称
          discountApplicant: "王五", // 贴现申请人
          hotScanTime: "2023-12-12", // hotScan检查时间
        },
        {
          bepsId: "13246231245245354", // 系统编号
          money: "999,99", // 金额
          workDate: "2023-12-11", // 交易日期
          businessKind: "T-kindSET", // 业务种类
          checkId: "345631244635531212351", // 检索编号(TRN)
          businessId: "3153125463463246", // 业务编号
          amonut: "CNY", // 币种
          hotScanResult: "AP", // HOTSCAN检查结果
          payeeName: "张三", // 收款人名称
          payeeBank: "中国工商银行", // 收款银行
          payeeAmount: "1324236546234623421", // 收款人账户
          payeeAddress: "浦东新区", // 收款人地址
          payerName: "李四", // 付款人名称
          payerBank: "中国银行", // 付款银行
          payerAmount: "4512355623462451235", // 付款人账户
          payerAddress: "北京朝阳路", // 付款人地址
          medBank1: "中国农业银行", // 中转行1
          medBank2: "中国建设银行", // 中转行2
          discountCounterparties: "中国农建", // 贴现贸易对手方
          acceptorName: "上海交通银行", // 承兑人全称
          discountApplicant: "王五", // 贴现申请人
          hotScanTime: "2023-12-12", // hotScan检查时间
        },
        {
          bepsId: "13246231245245354", // 系统编号
          money: "999,99", // 金额
          workDate: "2023-12-11", // 交易日期
          businessKind: "T-kindSET", // 业务种类
          checkId: "345631244635531212351", // 检索编号(TRN)
          businessId: "3153125463463246", // 业务编号
          amonut: "CNY", // 币种
          hotScanResult: "AP", // HOTSCAN检查结果
          payeeName: "张三", // 收款人名称
          payeeBank: "中国工商银行", // 收款银行
          payeeAmount: "1324236546234623421", // 收款人账户
          payeeAddress: "浦东新区", // 收款人地址
          payerName: "李四", // 付款人名称
          payerBank: "中国银行", // 付款银行
          payerAmount: "4512355623462451235", // 付款人账户
          payerAddress: "北京朝阳路", // 付款人地址
          medBank1: "中国农业银行", // 中转行1
          medBank2: "中国建设银行", // 中转行2
          discountCounterparties: "中国农建", // 贴现贸易对手方
          acceptorName: "上海交通银行", // 承兑人全称
          discountApplicant: "王五", // 贴现申请人
          hotScanTime: "2023-12-12", // hotScan检查时间
        },
        {
          bepsId: "13246231245245354", // 系统编号
          money: "999,99", // 金额
          workDate: "2023-12-11", // 交易日期
          businessKind: "T-kindSET", // 业务种类
          checkId: "345631244635531212351", // 检索编号(TRN)
          businessId: "3153125463463246", // 业务编号
          amonut: "CNY", // 币种
          hotScanResult: "AP", // HOTSCAN检查结果
          payeeName: "张三", // 收款人名称
          payeeBank: "中国工商银行", // 收款银行
          payeeAmount: "1324236546234623421", // 收款人账户
          payeeAddress: "浦东新区", // 收款人地址
          payerName: "李四", // 付款人名称
          payerBank: "中国银行", // 付款银行
          payerAmount: "4512355623462451235", // 付款人账户
          payerAddress: "北京朝阳路", // 付款人地址
          medBank1: "中国农业银行", // 中转行1
          medBank2: "中国建设银行", // 中转行2
          discountCounterparties: "中国农建", // 贴现贸易对手方
          acceptorName: "上海交通银行", // 承兑人全称
          discountApplicant: "王五", // 贴现申请人
          hotScanTime: "2023-12-12", // hotScan检查时间
        },
        {
          bepsId: "13246231245245354", // 系统编号
          money: "999,99", // 金额
          workDate: "2023-12-11", // 交易日期
          businessKind: "T-kindSET", // 业务种类
          checkId: "345631244635531212351", // 检索编号(TRN)
          businessId: "3153125463463246", // 业务编号
          amonut: "CNY", // 币种
          hotScanResult: "AP", // HOTSCAN检查结果
          payeeName: "张三", // 收款人名称
          payeeBank: "中国工商银行", // 收款银行
          payeeAmount: "1324236546234623421", // 收款人账户
          payeeAddress: "浦东新区", // 收款人地址
          payerName: "李四", // 付款人名称
          payerBank: "中国银行", // 付款银行
          payerAmount: "4512355623462451235", // 付款人账户
          payerAddress: "北京朝阳路", // 付款人地址
          medBank1: "中国农业银行", // 中转行1
          medBank2: "中国建设银行", // 中转行2
          discountCounterparties: "中国农建", // 贴现贸易对手方
          acceptorName: "上海交通银行", // 承兑人全称
          discountApplicant: "王五", // 贴现申请人
          hotScanTime: "2023-12-12", // hotScan检查时间
        },
        {
          bepsId: "13246231245245354", // 系统编号
          money: "999,99", // 金额
          workDate: "2023-12-11", // 交易日期
          businessKind: "T-kindSET", // 业务种类
          checkId: "345631244635531212351", // 检索编号(TRN)
          businessId: "3153125463463246", // 业务编号
          amonut: "CNY", // 币种
          hotScanResult: "AP", // HOTSCAN检查结果
          payeeName: "张三", // 收款人名称
          payeeBank: "中国工商银行", // 收款银行
          payeeAmount: "1324236546234623421", // 收款人账户
          payeeAddress: "浦东新区", // 收款人地址
          payerName: "李四", // 付款人名称
          payerBank: "中国银行", // 付款银行
          payerAmount: "4512355623462451235", // 付款人账户
          payerAddress: "北京朝阳路", // 付款人地址
          medBank1: "中国农业银行", // 中转行1
          medBank2: "中国建设银行", // 中转行2
          discountCounterparties: "中国农建", // 贴现贸易对手方
          acceptorName: "上海交通银行", // 承兑人全称
          discountApplicant: "王五", // 贴现申请人
          hotScanTime: "2023-12-12", // hotScan检查时间
        },
        {
          bepsId: "13246231245245354", // 系统编号
          money: "999,99", // 金额
          workDate: "2023-12-11", // 交易日期
          businessKind: "T-kindSET", // 业务种类
          checkId: "345631244635531212351", // 检索编号(TRN)
          businessId: "3153125463463246", // 业务编号
          amonut: "CNY", // 币种
          hotScanResult: "AP", // HOTSCAN检查结果
          payeeName: "张三", // 收款人名称
          payeeBank: "中国工商银行", // 收款银行
          payeeAmount: "1324236546234623421", // 收款人账户
          payeeAddress: "浦东新区", // 收款人地址
          payerName: "李四", // 付款人名称
          payerBank: "中国银行", // 付款银行
          payerAmount: "4512355623462451235", // 付款人账户
          payerAddress: "北京朝阳路", // 付款人地址
          medBank1: "中国农业银行", // 中转行1
          medBank2: "中国建设银行", // 中转行2
          discountCounterparties: "中国农建", // 贴现贸易对手方
          acceptorName: "上海交通银行", // 承兑人全称
          discountApplicant: "王五", // 贴现申请人
          hotScanTime: "2023-12-12", // hotScan检查时间
        },
        {
          bepsId: "13246231245245354", // 系统编号
          money: "999,99", // 金额
          workDate: "2023-12-11", // 交易日期
          businessKind: "T-kindSET", // 业务种类
          checkId: "345631244635531212351", // 检索编号(TRN)
          businessId: "3153125463463246", // 业务编号
          amonut: "CNY", // 币种
          hotScanResult: "AP", // HOTSCAN检查结果
          payeeName: "张三", // 收款人名称
          payeeBank: "中国工商银行", // 收款银行
          payeeAmount: "1324236546234623421", // 收款人账户
          payeeAddress: "浦东新区", // 收款人地址
          payerName: "李四", // 付款人名称
          payerBank: "中国银行", // 付款银行
          payerAmount: "4512355623462451235", // 付款人账户
          payerAddress: "北京朝阳路", // 付款人地址
          medBank1: "中国农业银行", // 中转行1
          medBank2: "中国建设银行", // 中转行2
          discountCounterparties: "中国农建", // 贴现贸易对手方
          acceptorName: "上海交通银行", // 承兑人全称
          discountApplicant: "王五", // 贴现申请人
          hotScanTime: "2023-12-12", // hotScan检查时间
        },
        {
          bepsId: "13246231245245354", // 系统编号
          money: "999,99", // 金额
          workDate: "2023-12-11", // 交易日期
          businessKind: "T-kindSET", // 业务种类
          checkId: "345631244635531212351", // 检索编号(TRN)
          businessId: "3153125463463246", // 业务编号
          amonut: "CNY", // 币种
          hotScanResult: "AP", // HOTSCAN检查结果
          payeeName: "张三", // 收款人名称
          payeeBank: "中国工商银行", // 收款银行
          payeeAmount: "1324236546234623421", // 收款人账户
          payeeAddress: "浦东新区", // 收款人地址
          payerName: "李四", // 付款人名称
          payerBank: "中国银行", // 付款银行
          payerAmount: "4512355623462451235", // 付款人账户
          payerAddress: "北京朝阳路", // 付款人地址
          medBank1: "中国农业银行", // 中转行1
          medBank2: "中国建设银行", // 中转行2
          discountCounterparties: "中国农建", // 贴现贸易对手方
          acceptorName: "上海交通银行", // 承兑人全称
          discountApplicant: "王五", // 贴现申请人
          hotScanTime: "2023-12-12", // hotScan检查时间
        },
      ],
    };
  },

  mounted() {
    //减去翻页的高度，因为容器包含了表格和翻页
    this.tableHeight = this.$refs.tableBox.clientHeight - 40;
  },

  methods: {
    // 搜索
    search(data) {
      console.log(data, "data");
      console.log("搜索");
    },

    // 重置
    reset() {
      this.resetForm("form");
    },

    // 详情
    detailRow(index, rows) {
      console.log(index, "详情");
      console.log("this.$refs.hotScanDetailQryDialog", this.$refs.hotScanDetailQryDialog);
      this.$refs.hotScanDetailQryDialog.show();
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },

    handleClose(done) {
      this.dialogVisible = false;
    },
  },
};
</script>

<style lang="scss">
.menu-tool-btn {
  width: 24px;
  height: 24px;
}

.menu-tree {
  height: 5%;
  margin-top: -20px;
  font-size: 28px;
}

.block {
  float: right;
}

.table-header-cell {
  background-color: #e7e7e7 !important;
  font-size: 12px !important;
  height: 70px !important;
}

.el-table .el-table__header-wrapper th,
.el-table .el-table__fixed-header-wrapper th {
  background-color: #e7e7e7;
  font-size: 12px;
  height: 40px;
}

.el-table .el-table__header-wrapper,
.el-table .el-table__fixed-header-wrapper {
  height: 40px;
}

.form-card {
  margin-bottom: 10px;
}

.el-table--mini th,
.el-table--mini td {
  padding: 0px 0;
}

.table-box {
  height: calc(100vh - 190px); /*示例中顶部区域固定高度190px*/
}
</style>
